<template>
  <div class="adminkanban">
    <el-form ref="form" :model="form" label-position="top" class="myform">
      <div>
        <el-form-item label="周期" class="myform-item">
          <el-select
            v-model="form.okr_effective_cycle"
            placeholder="请选择"
            @change="changetime"
          >
            <el-option
              v-for="item in datalist"
              :key="item"
              :label="item"
              :value="item"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="部门" class="myform-item">
          <el-cascader
            v-model="open_department_id"
            :options="department"
            @change="changeD"
            :props="Props"
          ></el-cascader>
        </el-form-item>
        <el-form-item
          style="margin-top: 50px; color: #8f959e"
          class="myform-item"
        >
          筛选范围共：{{ detailCount.all }}人
        </el-form-item>
      </div>
      <div>
        <!-- <el-form-item style="margin-top: 50px" class="myform-item">
          <el-button type="primary" @click="onSearch">查询</el-button>
        </el-form-item> -->
      </div>
    </el-form>
    <div class="adminkanban-arrow">
      <div @click="onClicKType(1)" class="pointer">
        <el-image :src="left"></el-image>
        <div :style="{ color: form.type == 1 ? '#2B71D6' : '' }">目标制定</div>
      </div>
      <div @click="onClicKType(2)" class="pointer">
        <el-image :src="right"></el-image>
        <div :style="{ color: form.type == 2 ? '#2B71D6' : '' }">过程跟进</div>
      </div>
      <div @click="onClicKType(3)" class="pointer">
        <el-image :src="right"></el-image>
        <div :style="{ color: form.type == 3 ? '#2B71D6' : '' }">目标复盘</div>
      </div>
    </div>
    <div class="adminkanban-data">
      <div class="adminkanban-data-left">
        <div id="postponenum"></div>
        <div class="adminkanban-data-left-right">
          <div class="adminkanban-data-left-right-top">
            <div></div>
            <div>
              <div>
                {{form.type | filtersType}}率 <span>{{ detailCount.tx_lv_ }}</span>
              </div>
              <div>
                <div>
                  {{form.type | filtersType}}人数：<span>{{ detailCount.num }}</span>
                </div>
                <div>
                  较上周期：<span>{{ detailCount.bj_tx_lv_ }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="adminkanban-data-left-right-top">
            <div style="background: #91cc76"></div>
            <div>
              <div>
                未{{form.type | filtersType}}率 <span>{{ detailCount.wtx_lv_ }}</span>
              </div>
              <div>
                <div>
                  未{{form.type | filtersType}}人数：<span>{{ detailCount.wtx_num }}</span>
                </div>
                <div>
                  较上周期：<span>{{ detailCount.bj_wtx_lv_ }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="adminkanban-data-right">
        <div class="adminkanban-data-right-title">关注事项</div>
        <div class="adminkanban-data-right-content">
          <div class="adminkanban-data-right-content-left">
            <div class="adminkanban-data-right-content-left-top">
              <div>重点关注</div>
              <div>本周期内{{ detailCount.wtx_num }}名人员未填写OKR</div>
            </div>
            <div class="adminkanban-data-right-content-left-remind">
              提醒Ta们尽快填写OKR
            </div>
          </div>
          <el-button plain type="primary" size="default" style="height: 40px"
            >提醒</el-button
          >
        </div>
      </div>
    </div>
    <div class="adminkanban-detailThree">
      <div id="postponenumZ"></div>
    </div>
    <div class="adminkanban-distribution" v-if="form.type == 3">
      <div class="adminkanban-distribution-title">
        <div>OKR评级分布</div>
        <div class="pointer" @click="onDetail" v-if="form.all == 1">
          查看详情<i class="el-icon-arrow-right"></i>
        </div>
      </div>
      <div class="adminkanban-distribution-echarts">
        <div id="postponenumBF"></div>
        <div id="postponenumZF"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import {
  postHomeWarehouseReservationTimeList,
  postHomeObjectiveD_list,
  postHomeObjectiveGetCount,
  postHomeObjectiveThree_detail,
} from "@/api";
import left from "@/assets/images/left.png";
import right from "@/assets/images/right.png";
import {
  postponenum,
  postponenumZ,
  postponenumZF,
  postponenumBF,
} from "./postponenum.js";
export default {
    filters:{
        filtersType(value){
            if(value == 1 ) return "填写"
            if(value == 2 ) return "更新"
            if(value == 3 ) return "评级"
        }
    },
  data() {
    return {
      right,
      left,
      Props: {
        value: "open_department_id",
        label: "name",
        children: "son",
        checkStrictly: true,
      },
      open_department_id: [""],
      form: {
        all: 1,
        type: 1,
        open_department_id: "",
        okr_effective_cycle: "",
        top_okr_effective_cycle: "",
      },
      datalist: [],
      department: [],
      detailCount: "",
      detailThree: "",
    };
  },
  async mounted() {
    await this.postHomeWarehouseReservationTimeList();
    await this.postHomeObjectiveD_list();
    await this.postHomeObjectiveGetCount();
    await this.postHomeObjectiveThree_detail();
    this.postponenum(postponenum(this.detailCount));
    this.postponenumZ(postponenumZ(this.detailThree.x));
    if (this.form.type == 3) {
      this.postponenumBF(postponenumBF(this.detailThree.fb.list));
      this.postponenumZF(postponenumZF(this.detailThree.fb.list));
    }
  },
  methods: {
    onDetail() {
      let okr_effective_cycle = this.form.okr_effective_cycle;
      this.$router.push({
        name: "HROKRDistributionDetails",
        query: { okr_effective_cycle },
      });
    },
    async onClicKType(e) {
      this.form.type = e;
      await this.postHomeObjectiveGetCount();
      await this.postHomeObjectiveThree_detail();
      this.postponenum(postponenum(this.detailCount));
      this.postponenumZ(postponenumZ(this.detailThree.x));
      if (this.form.type == 3) {
        this.postponenumBF(postponenumBF(this.detailThree.fb.list));
        this.postponenumZF(postponenumZF(this.detailThree.fb.list));
      }
    },
    async postponenum(data) {
      let myChart = echarts.init(document.getElementById("postponenum"));
      // 绘制图表
      myChart.setOption(data);
    },
    async postponenumZ(data) {
      let myChart = echarts.init(document.getElementById("postponenumZ"));
      // 绘制图表
      myChart.setOption(data);
    },
    async postponenumZF(data) {
      let myChart = echarts.init(document.getElementById("postponenumZF"));
      // 绘制图表
      myChart.setOption(data);
    },
    async postponenumBF(data) {
      let myChart = echarts.init(document.getElementById("postponenumBF"));
      // 绘制图表
      myChart.setOption(data);
    },
    async changeD(arr) {
      console.log(arr);
      let e = arr[arr.length - 1];
      console.log(e);
      this.form.open_department_id = e;
      if (e) {
        this.form.all = 2;
      } else {
        this.form.all = 1;
      }
      await this.postHomeObjectiveGetCount();
      await this.postHomeObjectiveThree_detail();
      this.postponenum(postponenum(this.detailCount));
      this.postponenumZ(postponenumZ(this.detailThree.x));
      if (this.form.type == 3) {
        this.postponenumBF(postponenumBF(this.detailThree.fb.list));
        this.postponenumZF(postponenumZF(this.detailThree.fb.list));
      }
    },
    async changetime(e) {
      console.log("e", e);
      let index = this.findindex(e, this.datalist);
      if (index) {
        this.form.top_okr_effective_cycle = data.time[index - 1];
      } else {
        this.form.top_okr_effective_cycle = "";
      }
      await this.postHomeObjectiveGetCount();
      await this.postHomeObjectiveThree_detail();
      this.postponenum(postponenum(this.detailCount));
      this.postponenumZ(postponenumZ(this.detailThree.x));
    },
    async postHomeObjectiveGetCount() {
      let { form } = this;
      let res = await postHomeObjectiveGetCount(form);
      this.detailCount = res.data;
    },
    async postHomeObjectiveThree_detail() {
      let { form } = this;
      let res = await postHomeObjectiveThree_detail(form);
      this.detailThree = res.data;
    },
    findindex(now, arr) {
      return arr.findIndex((item) => item == now);
    },

    async postHomeWarehouseReservationTimeList() {
      let res = await postHomeWarehouseReservationTimeList();
      let data = res.data;
      this.datalist = data.time;
      let index = this.findindex(data.now, data.time);
      this.form.okr_effective_cycle = data.now;
      if (index) {
        this.form.top_okr_effective_cycle = data.time[index - 1];
      }
    },
    async postHomeObjectiveD_list() {
      let obj = {
        type: 2,
      };
      let res = await postHomeObjectiveD_list(obj);
      console.log("res", res);
      let data = res.data;
      let objes = {
        name: "所有部门",
        open_department_id: "",
      };
      data.unshift(objes);
      this.department = data;
    },
  },
};
</script>

<style lang="scss" scoped>
#postponenum {
  width: 300px;
  height: 300px;
}
#postponenumZ {
  width: 100%;
  height: 600px;
}
#postponenumZF {
  width: 49%;
  height: 600px;
}
#postponenumBF {
  width: 49%;
  height: 600px;
}
.adminkanban {
  padding: 20px;
  border-radius: 8px;
  .adminkanban-distribution {
    background: #fff;
    margin-top: 20px;
    border-radius: 8px;
    padding: 20px;
    .adminkanban-distribution-title {
      display: flex;
      justify-content: space-between;
      > div:nth-child(1) {
        font-weight: 800;
      }
      > div:nth-child(2) {
        font-size: 14px;
        color: #8f959e;
        display: flex;
        align-items: center;
        > i {
          margin-left: 10px;
        }
      }
    }
    .adminkanban-distribution-echarts {
      display: flex;
    }
  }
  .adminkanban-arrow {
    display: flex;
    > div {
      position: relative;
      width: 100%;
      height: 80px;
      > .el-image {
        width: 100%;
        height: 80px;
      }
      > div {
        position: absolute;
        left: 0;
        right: 0;
        height: 80px;
        font-weight: 800;
        font-size: 18px;
        text-align: center;
        line-height: 80px;
      }
    }
    > div:not(:nth-child(1)) {
      margin-left: -20px;
    }
  }
  .adminkanban-detailThree {
    background: #fff;
    margin-top: 20px;
    border-radius: 8px;
    padding: 20px;
  }
  .adminkanban-data {
    display: flex;
    justify-content: space-between;
    .adminkanban-data-right {
      background: #fff;
      border-radius: 8px;
      width: 49%;
      height: 300px;
      padding: 20px;
      box-sizing: border-box;
      word-break: break-all;
      .adminkanban-data-right-title {
        font-size: 20px;
        font-weight: 800;
        border-bottom: 1px solid #cfd3d6;
        padding-bottom: 20px;
      }
      .adminkanban-data-right-content {
        margin-top: 20px;
        display: flex;
        justify-content: space-between;
        .adminkanban-data-right-content-left {
          .adminkanban-data-right-content-left-top {
            display: flex;
            align-items: center;
            font-weight: 800;
            > div:nth-child(1) {
              background: rgba($color: #ff6d58, $alpha: 0.8);
              color: #fff;
              width: 100px;
              height: 30px;
              font-size: 14px;
              border-radius: 4px;
              text-align: center;
              line-height: 30px;
              margin-right: 10px;
            }
          }
          .adminkanban-data-right-content-left-remind {
            color: #8f959e;
            font-size: 14px;
            margin-top: 10px;
          }
        }
      }
    }
    .adminkanban-data-left {
      background: #fff;
      border-radius: 8px;
      width: 49%;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 300px;
      .adminkanban-data-left-right {
        margin-left: 100px;
        .adminkanban-data-left-right-top {
          display: flex;
          padding-bottom: 20px;
          > div:nth-child(1) {
            margin-top: 10px;
            width: 10px;
            height: 10px;
            background: #2b71d6;
            margin-right: 10px;
          }
          > div:nth-child(2) {
            color: #333333;
            > div:nth-child(1) {
              display: flex;
              align-items: center;
              > span {
                font-size: 24px;
                font-weight: 800;
                margin: 0 10px;
              }
            }
            > div:nth-child(2) {
              display: flex;
              font-size: 14px;
              color: #8f959e;
              padding: 10px 0;
              > div {
                > span {
                  color: #2b71d6;
                  font-weight: 800;
                }
                padding-right: 10px;
              }
              > div:nth-child(2) {
                border-left: 1px solid #cfd3d6;
                padding-left: 10px;
              }
            }
          }
        }
      }
    }
  }
}
.myform {
  display: flex;
  justify-content: space-between;
  > div {
    display: flex;
  }
  &-item {
    margin-right: 10px;
  }
}
</style>